import { View, Button, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useLoad } from '@tarojs/taro'
import './index.scss'

// 定义用户信息类型
interface UserInfo {
  userId: number
  token: string
  username: string
}

// 定义 Mock 接口返回类型
interface ApiResponse<T> {
  success: boolean
  data: T
}

export default function Index() {
  useLoad(() => {
    console.log('index Page loaded.')
  })

  const handleLogin = async () => {
    try {
      // 调用 Mock 接口（模拟成功返回用户信息）
      // const res = await Taro.request<ApiResponse<UserInfo>>({
      //   url: 'mock/login', // 假设 mock 接口路径
      //   method: 'POST'
      // })

      const res = { "data": { "success": 1, "data": { "token": "token" } } }

      if (res.data.success) {
        // 存储用户信息（如 token）
        Taro.setStorageSync('token', res.data.data.token)
        // 跳转到主页
        await Taro.navigateTo({ url: '/pages/home/index' })
      }
    } catch (error) {
      Taro.showToast({ title: '登录失败', icon: 'none' })
      console.error(error)
    }
  }

  // 模拟注册接口调用
  const handleRegister = async () => {
    try {
      const res = await Taro.request<ApiResponse<UserInfo>>({
        url: 'mock/register',
        method: 'POST'
      })

      if (res.data.success) {
        Taro.showToast({ title: '注册成功' })
      }
    } catch (error) {
      Taro.showToast({ title: '注册失败', icon: 'none' })
      console.error(error)
    }
  }

  return (
    <View className='login-container'>
      {/* Logo */}
      <Image className='logo' src={require('../../assets/images/logo.png')} />

      {/* 登录按钮 */}
      <Button className='login-btn' onClick={handleLogin}>
        登录
      </Button>

      {/* 注册按钮 */}
      <Button className='register-btn' onClick={handleRegister}>
        注册
      </Button>
    </View>
  )
}
